<!doctype html>
<html lang="zh-CN">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>🐶 Dog & 🦊 Fox</title>

    <link rel="shortcut icon" href="favicon.ico" />

    <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

    <style>
        #dog,
        #fox {
            position: absolute;
            font-size: xx-large;
        }
        
        #panel {
            background-image: url("./img/forest.jpg");
            height: 150px
        }
        
        span.arrow-key {
            font-size: xx-large;
            cursor: pointer
        }
    </style>

</head>

<body>
    <header>
        <div class="collapse bg-dark" id="navbarHeader">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 col-md-7 py-4">
                        <h4 class="text-white">故事</h4>
                        <p class="text-muted">通常，人们认为，狗狗是我们人类的朋友，而狐狸则相反，它代表着奸诈,狡猾，人们都想除掉它，让美丽的森林恢复宁静 ... 于是人们派出了狗狗，开始了一场铲除邪恶的战斗 ...
                        </p>
                    </div>
                    <div class="col-sm-4 offset-md-1 py-4">
                        <h4 class="text-white">备注</h4>
                        <ul class="list-unstyled">
                            <li><a href="#" class="text-white">Fongzz.com</a></li>
                            <li><a href="#" class="text-white">by Livon</a></li>
                            <li><a href="#" class="text-white">2020.02</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="navbar navbar-dark bg-dark shadow-sm">
            <div class="container d-flex justify-content-between">
                <a href="#" class="navbar-brand d-flex align-items-center">
                    <strong>🐶 Dog & 🦊 Fox</strong>
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
            </div>
        </div>
    </header>


    <main role="main" id="app">

        <section class="jumbotron text-center">
            <div class="container">
                <h1>通过游戏学编程</h1>
                <p class="lead text-muted">不可否认，绝大多数人都喜欢电子游戏，但只有少数人具备开发电子游戏的技能，同时，编程技术的枯燥乏味也让许多人望而却步，如果可以一边玩游戏，一边学习编程，你会喜欢吗? 跟我一起来吧 ...</p>
                <p>
                    <a href="#" class="btn btn-primary my-2">访问我的博客</a>
                </p>
            </div>
        </section>

        <div class="album py-5 bg-light">
            <div class="container">

                <div class="row">
                    <div class="col-md-12">
                        <div class="card mb-4 shadow-sm">

                            <div id="panel">
                                <span id="dog" :class="dog.class" :style="{ left: dog.x + 'px', top: dog.y + 'px'}">🐶</span>

                                <span id="fox" :class="fox.class" :style="{ left: fox.x + 'px', top: fox.y + 'px'}">🦊</span>
                            </div>

                            <div class="card-body">
                                <p class="card-text">操作说明：
                                    <span class="arrow-key" @click="change_dog_direct(37)">⬅</span>
                                    <span class="arrow-key" @click="change_dog_direct(39)">➡</span>
                                    <span class="arrow-key" @click="change_dog_direct(38)">⬆</span>
                                    <span class="arrow-key" @click="change_dog_direct(40)">⬇</span> 键控制狗狗方向.
                                </p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group">

                                        <button id="play_again" @click="play_again" type="button" class="btn btn-sm btn-outline-secondary" :class="btn_play_again.class">
                                        <span v-if=" !dog.抓捕成功 ">正在抓捕 。。。</span>
                                        <span v-if=" dog.抓捕成功 "> 抓捕成功！再来一次</span>
                                      </button>

                                    </div>
                                    <small class="text-muted">抓捕时间：{{ dog.抓捕时间 }}</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>抓捕时间（秒）</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(seconds, index) of dog.logs">
                                    <td>{{index+1}}</td>
                                    <td>{{seconds}}</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td>平均时间：</td>
                                    <td>{{dog.抓捕时间平均值}}</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>

                <hr class="my-5">
                <div class="row">
                    <div class="col-md-8">
                        <br>
                        <p>这是一个使用 Vue.js 技术开发的一个简单小游戏，希望可以帮助想学编程的朋友们高高兴兴的，充满乐趣的进行学习。</p>
                        <p>👓在线演示：<a href="http://livon.gitee.io/aiarta/demo/">demo</a></p>
                        <p>🎃使用的技术：Vue.js2.6.11、Animate.css3.4.1、bootstrap4.4.1</p>
                        <p>✔源码下载：</p>
                        <p>🎶视频教程地址:</p>
                        <p>🦊在大多数时间，只出现在自己的领地范围内（左半部分），所以，如果🐶跑到了右半部分，你可以使用键盘 ⬅ 来召回狗狗，同样，你也可以试试另外几个方向键。同时，在手机端，屏幕上的按键也是可以点击的。</p>
                        <p>🦊的动作很敏捷，它神出鬼没，还时不时的得瑟一下，但 No Zuo No Die，绝大多数情况都是它跳到了🐶的面前，而被捕获。</p>

                    </div>
                    <div class="col-md-4">
                        <p class="float-right">
                            <a href="#" title="返回顶部">⬆</a>
                        </p>
                    </div>
                </div>

            </div>
        </div>

    </main>



    <footer>
        <div class="container text-center">
            <div class="row my-5">
                <p style="font-size: 10em;">🐶</p>
            </div>
            <div class="row mb-5">
                <div class="col-sm-12 footer-copyright">
                    MIT © 2020 - <a href="#">阿峰游戏编程</a>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <script src="index.js"></script>

</body>

</html>